import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Radio, Input, Spin} from 'antd';
import { connect } from 'dva';
import styles from './index.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

@Form.create()

class ChangeRemarkComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagData: {}
        }
    }

    componentDidMount() {
        this.getOrderTag();
        window.Isoption = true;
    }

    componentWillMount() {
        window.Isoption = false;
      }


    getOrderTag =() =>{
        const { dispatch } = this.props;
        dispatch({
            type: 'orderList/GetOrderTag',
            payload: {
                OrderNo: `${this.props.param.OrderNo}`
            },
            callBack: {
                success: res => {
                    if(res.Code ===0) {
                        this.setState({
                            tagData: res.Data
                        })
                    }
                },
                error: res => {
                    message.error(res.Msg)
                }
            }
        })
    }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    handleSubmit =(e) => {
        e.preventDefault();
        const { dispatch } = this.props;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderList/SetOrderTag',
                    payload: {
                        OrderNo: this.props.param.OrderNo,
                        OrderTag: values.orderTag,
                        Remark: values.remark?values.remark:''
                    },
                    callBack: {
                        success: res => {
                            if(res.Code===0) {
                                message.success('修改成功');
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
    }


    render() {
        const {getFieldDecorator} = this.props.form;
        const {oemInfo, loading1, loading2} = this.props;
        const {tagData} = this.state;
        const tagDataInitial = tagData.OrderTag===0?'':tagData.OrderTag;
        const disable = tagData.OrderStatus===3 || tagData.OrderStatus===5 || tagData.OrderStatus===6|| tagData.OrderStatus===7;
        const OrderTag = [
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark01.png',
                value: 1
            },
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark02.png',
                value: 2
            },
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark03.png',
                value: 3
            },
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark04.png',
                value: 4
            },
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark05.png',
                value: 5
            },
            {
                label: 'xkdnewyun/systemfile/store/icon/orderlist-remark06.png',
                value: 6
            },
        ]
        const formItemLayout = {
            labelCol: {
                span: 6,
              },
              wrapperCol: {
                span: 16,
              },
          }
        return (
            <Form className="xkd-mt24" onSubmit={this.handleSubmit}>
                <Spin spinning={loading2}>
                    <FormItem
                        {...formItemLayout}
                        label="标志"
                    >
                        {getFieldDecorator('orderTag',{
                            initialValue: tagDataInitial,
                            rules: [{required: true, message: '此项为必选项'}]
                        })(
                            <RadioGroup className={styles.radioItem}>
                                {OrderTag.map((item, index) => {
                                    return <Radio value={item.value} key={index} disabled={disable}>
                                        <img
                                            src={oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + item.label +'?x-oss-process=style/240':''}
                                            className={styles.tagImage}
                                        />
                                    </Radio>
                                })}
                            </RadioGroup>
                    )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="备注"
                        extra="备注信息仅后台可见，且订单发货后将无法再修改"
                    >
                        {getFieldDecorator('remark',{
                            initialValue: tagData.MerchantRemark?tagData.MerchantRemark:'',
                            rules: [{required: false, message: '此项为必填项'}]
                        })(
                            <TextArea rows={3} disabled={disable} maxLength={60}/>
                    )}
                    </FormItem>
                <FormItem className="xkd-model-footBtn">
                    <Button onClick={this.handleCancel} className="xkd-mr16">
                        取消
                    </Button>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading1}
                        disabled={disable}
                    >
                        确定
                    </Button>
                </FormItem>
                </Spin>
            </Form>
        )
    }
}

const ChangeRemark = createModalContainer(
    connect(({orderList, global, loading}) => ({
        orderList,
        oemInfo: global.oemInfo,
        loading1: loading.effects['orderList/SetOrderTag'],
        loading2:  loading.effects['orderList/GetOrderTag']
    }))(ChangeRemarkComponent),
    true,
    true
);

export default ChangeRemark;
